import { createBrowserRouter, Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";
import { SpinLoading } from "antd-mobile";
import AuthRouter from "@/router/AuthRouter";

const Layout = lazy(() => import("@/Layout/Layout"));
const Home = lazy(() => import("@/views/Home/Home"));
const Category = lazy(() => import("@/views/Category/Category"));
const Cart = lazy(() => import("@/views/Cart/Cart"));
const User = lazy(() => import("@/views/User/User"));
const Search = lazy(() => import("@/views/Search/Search"));
const GoodList = lazy(() => import("@/views/GoodList/GoodList"));
const GoodDetail = lazy(() => import("@/views/GoodDetail/GoodDetail"));
const CommentList = lazy(() => import("@/views/CommentList/CommentList"));
const Order = lazy(() => import("@/views/Order/Order"));
const Checkout = lazy(() => import("@/views/Checkout/Checkout"));
const TakeAddress = lazy(() => import("@/views/TakeAddress/TakeAddress"));
const Login = lazy(() => import("@/views/Login/Login"));

// 路由按需引入导致报错：懒加载模式的组件写法外面需要套一层Loading的提示加载组件
const fallback = () => {
   return (
      <div className="lazy-loading">
         <SpinLoading color="primary"></SpinLoading>
         <span>加载中</span>
      </div>
   );
};

const withLoadingComponent = (component: JSX.Element) => (
   <Suspense fallback={fallback()}>
      {component}
   </Suspense>
);

const router = createBrowserRouter([
   {
      path: "/",
      element: withLoadingComponent(<AuthRouter><Layout></Layout></AuthRouter>),
      children: [
         {
            index: true,
            element: withLoadingComponent(<AuthRouter><Navigate to="/home"></Navigate></AuthRouter>),
         },
         {
            path: "/home",
            element: withLoadingComponent(<AuthRouter>(<Home></Home></AuthRouter>),
         },
         {
            path: "/category",
            element: withLoadingComponent(<AuthRouter><Category></Category></AuthRouter>),
         },
         {
            path: "/cart",
            element: withLoadingComponent(<AuthRouter><Cart></Cart></AuthRouter>),
         },
         {
            path: "/user",
            element: withLoadingComponent(<AuthRouter><User></User></AuthRouter>),
         },
      ],
   },
   {
      path: "/search",
      element: withLoadingComponent(<AuthRouter><Search></Search></AuthRouter>),
   },
   {
      path: "/good-list",
      element: withLoadingComponent(<AuthRouter><GoodList></GoodList></AuthRouter>),
   },
   {
      path: "/good-detail",
      element: withLoadingComponent(<AuthRouter><GoodDetail></GoodDetail></AuthRouter>),
   },
   {
      path: "comment-list",
      element: withLoadingComponent(<AuthRouter><CommentList></CommentList></AuthRouter>),
   },
   {
      path: "/order",
      element: withLoadingComponent(<AuthRouter><Order></Order></AuthRouter>),
   },
   {
      path: "/checkout",
      element: withLoadingComponent(<AuthRouter><Checkout></Checkout></AuthRouter>),
   },
   {
      path: "/take-address",
      element: withLoadingComponent(<TakeAddress></TakeAddress>),
   },
   {
      path: "/login",
      element: withLoadingComponent(<AuthRouter><Login></Login></AuthRouter>),
   },
]);

export default router;
